<template>
	<div class="container">
		<div style="position:absolute; right: 20px;">
			<a-button style="margin-left: 10px;" @click="printElement('uselog-page')">打印/导出PDF</a-button>
			<a-button style="margin-left: 10px;" @click="closeTab('/uselog')">
				<close-outlined />关闭
			</a-button>
		</div>
		<div id="uselog-page">
			<a-descriptions title="发料出库详情" bordered size="middle">
				<a-descriptions-item label="项目">{{ dataSource?.project?.name }}</a-descriptions-item>
				<a-descriptions-item label="发料日期">{{ dayjs(dataSource?.create_time).format('YYYY-MM-DD HH:mm:ss') }}</a-descriptions-item>
				<a-descriptions-item label="工号">{{ dataSource?.gonghao?.name }}</a-descriptions-item>
				<a-descriptions-item label="发料人">{{ dataSource?.user?.fullname }}</a-descriptions-item>
				<template v-if="dataSource.opr_type === 1">
					<a-descriptions-item label="领料单位">{{ dataSource?.supplier?.company_name }}</a-descriptions-item>
					<a-descriptions-item label="领料人">{{ getOprUser(dataSource) }}</a-descriptions-item>
				</template>
				<template v-else-if="dataSource.opr_type === 2">
					<a-descriptions-item label="本部负责人">{{ dataSource?.receiver?.fullname }}</a-descriptions-item>
				</template>
			</a-descriptions>

			<!--物资清单-->
			<div class="material-list">
				<h3><b>物资清单</b></h3>

				<a-table :data-source="dataSource.materials" :scroll="tableScroll" :pagination="false" :columns="materialColumns" :row-key="(record) => record.key">
					<!--<template #bodyCell="{ column, record, index }"></template>-->
				</a-table>
			</div>
		</div>
		<a-row :gutter="20">
			<a-col :span="24" class="py-4 text-center">
				<a-space>
					<a-button @click="closeTab('/uselog')">
						<close-outlined />关闭
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, getCurrentInstance, inject } from "vue";
import { printElement } from '../utils/exportData.js';
import { post, listToTree } from "../utils";
import dayjs from "dayjs";
const dataSource = ref({});

import { useRoute } from "vue-router";
import { CloseOutlined } from "@ant-design/icons-vue";
const route = useRoute();
const id = computed(() => {
	return route.params.id || 0;
});
const isPrint = JSON.parse(route.query.print || 'false');

post("uselog/info", { id: id.value }).then(data => {
	const uselogMaterials = data.UselogMaterials.reduce((res, arr) => {
		res[arr.id] = arr;

		return res;
	}, []);

	data.materials = data.materials.map(({ name, model, unit, UselogMaterial }) => {
		const { id, quantity, send_qty, position } = UselogMaterial;
		const { account_type, expenditure, memo } = uselogMaterials[id];
		return {
			name,
			model,
			unit,
			quantity,
			send_qty,
			position: position || "-",
			account_type: account_type?.name || "-",
			expenditure: expenditure?.name || "-",
			memo
		};
	});

	dataSource.value = data;
});

const materialColumns = [
	{
		title: "ID",
		dataIndex: "key",
		width: 80,
		align: "center",
		customRender: ({ text, record, index, column }) => {
			return index + 1;
		}
	},
	{
		title: "物资名称",
		dataIndex: "name",
		width: 200,
		ellipsis: true
	},
	{
		title: "型号规格",
		dataIndex: "model",
		width: 200,
		ellipsis: true
	},
	{
		title: "单位",
		dataIndex: "unit",
		width: 80,
		align: "center"
	},
	{
		title: "库存数量",
		dataIndex: "quantity",
		width: 100,
		align: "center"
	},
	{
		title: "发料数量",
		dataIndex: "send_qty",
		width: 120,
		align: "center"
	},
	{
		title: "使用部位",
		dataIndex: "position",
		width: 160,
		align: "center"
	},
	{
		title: "核算分类",
		dataIndex: "account_type",
		width: 160,
		align: "center"
	},
	{
		title: "支出方向",
		dataIndex: "expenditure",
		width: 160,
		align: "center"
	},
	{
		title: "备注",
		dataIndex: "memo",
		width: 200
	},
	{}
];

// const tableScroll = computed(() => ({
// 	x: document.documentElement.clientWidth - 650
// }));
const tableScroll = computed(() => (!isPrint ? { y: Math.min(50 * 10, 50 * dataSource.value.materials?.length) } : {}));
const getOprUser = (d) => {
	console.log(d)
	if (d?.client?.name) {
		return `${d?.client?.name}（${d?.supplier?.company_name}）`;
	} else {
		return `${d?.receiver?.fullname}（${d?.supplier?.company_name}）`;
	}
}
const closeTab = inject("closeTab");
</script>

<style scoped lang="scss">
.container {
	background: #fff;
	padding: 12px;
}

.material-list {
	margin-top: 20px;

	h3 {
		margin-bottom: 15px;
	}
}
:deep(.ant-descriptions-title) {
  text-align: center;
}
</style>
